.pointSizeSliderThumb {
  box-shadow: none !important;
}

.pointSizeSliderThumb:hover {
  box-shadow: none !important;
}

.pointSizeTextField {
  border: none;
  font: inherit;
  border-bottom: 1px solid var(--fo-palette-primary-plainColor);
  background: transparent;
  outline-width: 0;
  width: 2.5em;
  color: var(--fo-palette-text-primary);
}

.pointSizeTextField:focus {
  border: none;
  border-bottom: 1px solid var(--fo-palette-primary-plainColor);
  background: transparent;
  outline-width: 0;
}

.pointSizeSlider {
  align-self: center;
  margin-right: 30px;
}

.pointSizeContainer {
  margin: 1em 0;
  display: flex;
  justify-content: center;
  align-content: center;
}

.gridConfigContainer {
  display: flex;
  flex-direction: column;
  margin: 5px;
}

.gridSizeContainer {
  display: flex;
  justify-content: space-between;
}

.gridLabel {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1em;
}

.gridLabel > :first-child {
  flex: 0.5;
}

.gridLabel > :last-child {
  flex: 1;
  align-self: flex-start;
  border-radius: 0;
}

.pointSizeBaseContainer {
  margin: 1em;
}

.pointSizeAttenuationLabel {
  /* mui should override label styles with these, but doesn't */
  font-family: inherit !important;
}
